<template>
	<view class="container">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				我的订单
			</block>
		</cu-custom>
		<tui-tabs :tabs="tabs" :isFixed="scrollTop>=0" :currentTab="currentTab" selectedColor="#E41F19" sliderBgColor="#E41F19"
		 @change="change" itemWidth="25%"></tui-tabs>
		<!--选项卡逻辑自己实现即可，此处未做处理-->
		<view :class="{'tui-order-list':scrollTop>=0}">
			<view class="tui-order-item" v-for="(item,index) in datalist" :key="index" v-if="datalist.length!=0">
				<tui-list-cell :hover="false" :lineLeft="false">
					<view class="tui-goods-title">
						<view>订单号：{{item.order_no}}</view>
						<view class="tui-order-status">{{item.status_name}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0">
					<view class="tui-goods-item align-center">
						<image src="/static/bus.png" class="tui-goods-img"></image>
						<view class="tui-goods-center">
							<view class="tui-goods-name">{{item.start_address}} <text class=" myIcon-jiantou padding-lr-xs"></text> {{item.end_address}}</view>
						</view>
						<view class="tui-price-right">
							<view style="margin-bottom: 6rpx;">￥{{item.price}}</view>
							<view>x{{item.count}}</view>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" unlined>
					<view class="tui-goods-item" style="padding: 0;">
						<view class="time" style="width: 800rpx;">发车时间:{{item.train_number_time}} {{item.departure_time}}</view>
						<view class="tui-goods-price">
							<view>合计：</view>
							<view class="tui-size-24">￥</view>
							<view class="tui-price-large">{{item.amount_real}}</view>
						</view>
					</view>
					
				</tui-list-cell>
				<view class="tui-order-btn">
					<view class="tui-btn-ml" v-if="item.payment_status==0" @click="quxiao(item.order_no)">
						<tui-button type="black" plain width="152rpx" height="56rpx" :size="26" shape="circle">取消订单</tui-button>
					</view>
					<view class="tui-btn-ml" v-if="(item.status==1||item.status==2)&&item.payment_status==1" @click="goUlr(item.order_no)">
						<tui-button type="black" plain width="152rpx" height="56rpx" :size="26" shape="circle">查看详情</tui-button>
					</view>
					<view class="tui-btn-ml" v-if="item.payment_status==0" @click="goBuy(item.order_no)">
						<tui-button type="danger" plain width="152rpx" height="56rpx" :size="26" shape="circle">立即付款</tui-button>
					</view>
				</view>
			</view>
			<view class="zanwu" v-if="datalist.length==0">
				<image src="/static/noCart.png" mode=""></image>
				<view class="">暂无数据</view>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#fafafa"></tui-nomore>
		<!--加载loadding-->
		<view class="" style="height:10rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
					name: "全部"
				}, {
					name: "待付款"
				}, {
					name: "待出行"
				}, {
					name: "已完成"
				}, {
					name: "已退款"
				}],
				currentTab:"0",
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				scrollTop: 0,
				datalist:[]
			}
		},
		onLoad(e) {
			let that = this
			that.currentTab = e.id
			that.pageIndex=1
			that.datalist = []
			that.getList()
		},
		onReachBottom() {
			let that = this
			that.pageIndex++
			that.loadding = true
			that.pullUpOn = true
			setTimeout(() => {
				that.getList()
			}, 1000)
		},
		methods: {
			change(e) {
				this.currentTab = e.index
				this.loadding = true
				this.pullUpOn = true
				this.pageIndex = 1
				this.datalist = []
				this.getList()
			},
			
			goUlr(e){
				this.tui.href('/pages/order/OrderDetail?id='+e)
			},
			getList(){
				let that = this
				that.tui.request("api.auth.ticket/orderList", "POST", {status:that.currentTab,page:that.pageIndex}, false, false, true).then((res) => {
					if(res.code==1){
						that.datalist = that.datalist.concat(res.data.list)
						that.loadding = false
						if(res.list.length==0){
							that.pullUpOn = false
						}
					}
				}).catch((res) => {
					
				})
			},
			quxiao(e){
				let that = this
				that.tui.request("api.auth.ticket/cancel", "POST", {order_no:e}, false, false, true).then((res) => {
					that.tui.toast(res.info)
					if(res.code==1){
						that.pageIndex=1
						that.datalist=[]
						that.getList()
					}
				}).catch((res) => {
					
				})
			},
			goBuy(e){
				let that = this
				that.tui.request("api.auth.ticket/payment", "POST", {order_no:e,payment_code:'M8029518580635954830'}, false, false, false).then((dds) => {
					if (dds.code == 1) {
						function onBridgeReady() {
							WeixinJSBridge.invoke(
								'getBrandWCPayRequest', {
									"appId": dds.data.param.appId, //公众号名称，由商户传入     
									"timeStamp": dds.data.param.timeStamp, //时间戳，自1970年以来的秒数     
									"nonceStr": dds.data.param.nonceStr, //随机串     
									"package": dds.data.param.package,
									"signType": dds.data.param.signType, //微信签名方式：     
									"paySign": dds.data.param.paySign, //微信签名 
								},
								function(res) {
									if (res.err_msg == "get_brand_wcpay_request:ok") {
										that.tui.toast('支付成功')
										setTimeout(function() {
											uni.reLaunch({
												url:'/pages/index/index?PageCur=order'
											})
										}, 1000)
										// 使用以上方式判断前端返回,微信团队郑重提示：
										// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
									}else{
										setTimeout(function() {
											uni.reLaunch({
												url:'/pages/index/index?PageCur=order'
											})
										}, 1000)
									}
								});
						}
						if (typeof WeixinJSBridge == "undefined") {
							if (document.addEventListener) {
								document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
							} else if (document.attachEvent) {
								document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
								document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
							}
						} else {
							onBridgeReady();
						}
					}
				}).catch((dds) => {
				
				})
			},
		},
	}
</script>

<style>
	page{padding-top: 0;}
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-order-list {
		margin-top: 90rpx;
	}

	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-order-status {
		color: #888;
		font-size: 26rpx;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 40rpx;
		height: 40rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 30rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 24rpx;
	}

	.tui-size-24 {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-price-large {
		font-size: 32rpx;
		line-height: 30rpx;
		font-weight: 500;
	}

	.tui-order-btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background: #fff;
		padding: 10rpx 30rpx 20rpx;
		box-sizing: border-box;
	}

	.tui-btn-ml {
		margin-left: 20rpx;
	}
</style>
